<template>
    <ul class="singer-album">
       <li v-for="(item,index) in currentList" :key="index" ref="currentLi">
         <div class="album-img">
           <img :src="item.album_pic" @click="toAlbumDetail(item.album_mid,item.album_id)" alt="">
           <div class="icon" v-show="picSize===300">
             <span class="iconfont icon-bofang1"></span>
           </div>
         </div>
         <div class="album-name ellipsis" @click="toAlbumDetail(item.album_mid,item.album_id)">{{item.album_name}}</div>
         <div class="album-pub-time">{{item.pub_time}}</div>
       </li>
    </ul>
</template>

<script>
    import {mapState} from 'vuex'
    export default {
        name: "SingerAlbum",
        props:{
          picSize:Number,
          count:Number,
          list:Array,
        },
        data(){
          return{
            currentList:[],
          }
        },
        computed:{
          ...mapState(['singerAlbum','albumDetail']),
        },
        methods:{
          toAlbumDetail(mid,id){
            // console.log(id);
            this.$router.replace({path:`/albumdetail/${mid}/${id}`});
            location.reload()
          }
        },
        watch:{
          list(value){
            let count=this.count;
            for(let i=0;i<value.length;i++){
              if(i<count){
                // console.log(this.$route.params.mid);
                // console.log(this.singerAlbum.list[i].album_mid);
                if(this.$route.params.mid!==value[i].album_mid){
                  this.currentList.push(value[i])
                }else{
                  count++;
                }
              }else{
                break;
              }
            }
            console.log(this.currentList);
          },
        },
      updated(){
        if(this.picSize===150){
          // console.log(this.$refs);
          // console.log(this.$refs.currentLi.length);
          for(let i=0;i<this.$refs.currentLi.length;i++){
            this.$refs.currentLi[i].style.width='85px'
          }
        }else if(this.picSize===300){
          for(let i=0;i<this.$refs.currentLi.length;i++){
            this.$refs.currentLi[i].style.width='222px'
          }
        }
      },
    }
</script>

<style scoped lang="less">
.singer-album{
  li{
    display: inline-block;
    margin: 10px 18px 10px 0px;
    font-size: 14px;
    .album-img{
      position: relative;
      overflow: hidden;
      &:hover{
        &:after{
          content: '';
          display: block;
          width: 222px;
          height: 224px;
          position: absolute;
          top:0;
          left: 0;
          background: #000;
          opacity: 0.2;
          /*解决存在蒙层还能点击的问题*/
          pointer-events:none;
        }
        >img{
          transform: scale(1.2);
        }
        .icon{
          opacity: 1;
          transform: scale(1.3);
        }
      }
      >img{
        width: 100%;
        transition: all 0.6s;
      }
      .icon{
        position: absolute;
        z-index: 1;
        background: white;
        border-radius: 50%;
        height:40px;
        width: 40px;
        text-align: center;
        line-height: 40px;
        opacity: 0;
        transition: all 1s;
        top:30%;
        right: 0;
        left: 0;
        margin: 0 auto;
        .iconfont{
          font-size: 25px;
          color: #545454;
          margin-left: 4px;
          margin-top: 3px;
          display: inline-block;
        }
      }
    }
    .album-name{
      line-height: 2;
      &:hover{
        cursor: pointer;
        color: #31c27c;
      }
    }
    .album-pub-time{
      color: #999;
    }
  }
}
</style>
